<template>
  <div>
    <el-dialog title="添加预警" :visible.sync="isAdd" width="40%" :before-close="handleClose" :close-on-click-modal='false'>
      <el-form ref="form" :model="form" label-width="100px" label-position="left" size="small" :rules="rules">
        <el-form-item label="学生姓名：" prop="uid">
          <el-button v-if="this.studentList.length === 0 " type="primary" size="mini" @click="selectStudentFn()">选择学生</el-button>
          <div v-else>
            <el-tag v-for="tag in this.studentList" :key="tag.uid" closable @close="removeTag(tag)"> {{tag.real_name}} </el-tag>
          </div>
        </el-form-item>
        <el-form-item label="上报来源：" prop="source">
          <el-select v-model="form.source" placeholder="请选择">
            <el-option v-for="item in options.source" :key="item.id" :label="item.title" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="问题类型：" prop="question_type">
          <el-select v-model="form.question_type" placeholder="请选择">
            <el-option v-for="item in options.crisis" :key="item.id" :label="item.title" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注：" prop="add_notes" >
          <el-input type="textarea" placeholder="请输入内容" v-model="form.add_notes" maxlength="1000" show-word-limit> </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="checkFn()">确 定</el-button>
      </span>
    </el-dialog>
    <add-student v-if="this.isAddStudent" :isAddStudent="isAddStudent" @noAddStudent="noAddStudent"></add-student>
  </div>
</template>
<script>
import addStudent from './addStudent.vue'
import {APIEARLYWARNINGSYSTEMLIST, APIEARLYWARNINGSTORE} from '@/common/api.js'
export default {
  props: ['isAdd'],
  components: {addStudent},
  data () {
    return {
      form: {
        uid: '',
        source: '',
        question_type: '',
        add_notes: ''
      },
      options: {},
      rules: {
        uid: [
          { required: true, message: '请选择学生' }
        ],
        source: [
          { required: true, message: '请选择上报来源', trigger: 'blur' }
        ],
        question_type: [
          { required: true, message: '请选择问题类型', trigger: 'blur' }
        ],
        add_notes: [
          { required: true, message: '请填写备注', trigger: 'blur' }
        ]
      },
      isAddStudent: false,
      studentList: []
    }
  },
  created () {
    this.selectFn()
  },
  methods: {
    handleClose () {
      this.$emit('noAdd')
    },
    close (type) {
      this.$emit('noAdd', type)
    },
    selectStudentFn () {
      this.isAddStudent = true
    },
    noAddStudent (type) {
      console.log(type)
      this.studentList = type
      this.isAddStudent = false
    },
    removeTag (tag) {
      this.studentList.splice(this.studentList.indexOf(tag), 1)
    },
    selectFn () {
      APIEARLYWARNINGSYSTEMLIST().then((res) => {
        this.options = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    checkFn () {
      var uid = []
      this.studentList.forEach(element => {
        uid.push(element.uid)
      })
      this.form.uid = uid.toString()
      APIEARLYWARNINGSTORE(this.form).then((res) => {
        this.$message.success(res.msg)
        this.close(1)
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    }
  }
}
</script>
<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
